<template>
  <div class="playback">
    <div class="playback-tite">
      <div class="flex">
        <div class="img-box">
          <img src="@/assets/ivr/playback.svg" alt="" class="w-16 h-16" />
        </div>
        <div class="titles">{{ nodeName }}</div>
      </div>
      <div>
        <el-popover placement="bottom" trigger="click" width="100">
          <div class="node-list">
            <div class="p-8" @click="copyNode">复制</div>
            <el-divider style="margin: 4px 0" />
            <div class="p-8" @click.stop="delNode">删除</div>
          </div>
          <template #reference>
            <svg
              t="1744771665484"
              class="icon cursor-pointer"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="5189"
              width="16"
              height="16"
            >
              <path
                d="M97.95349285 509.99901215m-94.17807172 0a94.17807171 94.17807171 0 1 0 188.35614346 0 94.17807171 94.17807171 0 1 0-188.35614346 0Z"
                fill="#2c2c2c"
                p-id="5190"
              ></path>
              <path
                d="M510.81520458 509.99901215m-94.17807172 0a94.17807171 94.17807171 0 1 0 188.35614344 0 94.17807171 94.17807171 0 1 0-188.35614344 0Z"
                fill="#2c2c2c"
                p-id="5191"
              ></path>
              <path
                d="M923.6769163 509.99901215m-94.17807172 0a94.17807171 94.17807171 0 1 0 188.35614343 0 94.17807171 94.17807171 0 1 0-188.35614343 0Z"
                fill="#2c2c2c"
                p-id="5192"
              ></path>
            </svg>
          </template>
        </el-popover>
      </div>
    </div>
    <div class="playback-content p-24px">
      <el-form :model="formState">
        <el-form-item label="节点名称" required>
          <el-input v-model="formState.name" @input="updateProperties" />
        </el-form-item>
        <el-form-item label="放音类型">
          <el-radio-group v-model="formState.playbackType" @change="updateProperties('clear')">
            <el-radio :label="1">语音文件</el-radio>
            <el-radio :label="2">文本内容</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="语音文件" v-if="formState.playbackType == 1">
          <el-select
            v-model="formState.fileId"
            placeholder="请选择语音文件"
            @change="updateProperties('filePath')"
          >
            <el-option
              :value="item.id"
              v-for="item in voiceOptions"
              :key="item.id"
              :label="item.name"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="文本内容">
          <el-input
            @dblclick.stop="changeContent"
            v-model="formState.content"
            type="textarea"
            placeholder="请输入文本内容"
            @input="updateProperties"
          ></el-input>
        </el-form-item>
        <el-form-item label="放音次数">
          <el-input-number
            id="inputNumber"
            v-model="formState.num"
            :min="1"
            :max="100"
            @change="updateProperties"
          />
        </el-form-item>
      </el-form>
    </div>
    <Dialog v-model="keyDiag" title="选择字段" width="80%">
      <el-form ref="voiceForm" :model="keyFile">
        <el-form-item label="字段" prop="content">
          <el-select v-model="keyFile.file" class="w-100%">
            <el-option
              v-for="i in keyList"
              :key="i.id"
              :label="i.extendName"
              :value="i.extendName"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="keyDiag = false">取消</el-button>
        <el-button type="primary" @click="submitKey">确定</el-button>
      </template>
    </Dialog>
  </div>
</template>

<script lang="ts">
import { defineComponent, createVNode } from 'vue'
import { useIvrStore } from '@/store/modules/ivr'
import { generateRandomString } from '@/utils/node'
import { getIvrVoiceAll } from '@/api/call/voiceManagement'
import { cloneDeep } from 'lodash-es'
import { RecordApi } from '@/api/call/record'

const useStore = useIvrStore()
export default defineComponent({
  name: 'StartNode',
  inject: ['getNode', 'getGraph'],
  data() {
    return {
      formState: {
        playbackType: 1,
        fileId: '',
        content: '',
        filePath: '',
        num: '',
        name: ''
      },
      nodeName: '',
      id: 'playback_',
      voiceOptions: [],
      keyList: [],
      keyDiag: false,
      keyFile: {
        file: ''
      }
    }
  },
  mounted() {
    this.getVoiceOption()
    const node = (this as any).getNode()
    const graph = (this as any).getGraph()
    const { nodes } = graph
    const index = nodes.findIndex((item) => item.id == node.id)
    const playbackArr = nodes.filter((item) => item.properties.businessType == 2)
    const { playbackType, fileId, content, num, name, filePath, nodeName, nodeIndex } =
      nodes[index].properties
    this.nodeName = nodeName + (nodeIndex == 0 ? '' : nodeIndex)

    Object.assign(this.formState, { playbackType, fileId, content, num, filePath, name })
  },
  methods: {
    updateProperties(type) {
      if (type == 'clear') {
        this.formState.fileId = ''
        this.formState.content = ''
      }
      if (type == 'filePath') {
        const data = this.voiceOptions.find((item) => item.id == this.formState.fileId)
        if (data) {
          this.formState.filePath = data.localPath
        } else {
          this.formState.filePath = ''
        }
      }
      const node = (this as any).getNode()
      const graph = (this as any).getGraph()
      const { nodes } = graph
      const index = nodes.findIndex((item) => item.id === node.id)
      if (index !== -1) {
        const obj = cloneDeep(nodes[index].properties)
        if (this.formState.playbackType == 1) {
          obj.height = 400
        } else {
          obj.height = 350
        }
        const updatedNode = { ...obj, ...this.formState }
        useStore.getLf.setProperties(node.id, updatedNode)
      }
    },
    // 删除节点
    delNode() {
      const node = (this as any).getNode()
      ElMessageBox.confirm('确定要删除此节点吗？', '提示', {
        confirmButtonText: '确 认',
        cancelButtonText: '取 消'
      }).then(() => {
        useStore.getLf.deleteNode(node.id)
      })
    },
    // 复制节点
    copyNode() {
      this.visible = false
      const node = (this as any).getNode()
      const CloneNode = useStore.getLf.cloneNode(node.id)
      useStore.getLf.changeNodeId(CloneNode.id, this.id + generateRandomString(6))
    },
    // 语音文件列表
    async getVoiceOption() {
      this.voiceOptions = await getIvrVoiceAll()
    },
    async changeContent() {
      this.keyList = await RecordApi.taskCalleeListNumberRule()
      this.keyFile.file = ''
      this.keyDiag = true
    },
    submitKey() {
      this.keyDiag = false
      this.formState.content = this.formState.content + `{{${this.keyFile.file}}}`
    }
  }
})
</script>
<style scoped>
.playback-content {
  border-radius: 8px;
  border: 1px solid #f0f0f0;
}
.playback {
  padding: 16px;
  box-shadow: 0 2px 4px #1f23291f;
  border: 2px solid #fff !important;
  background: #ffffff;
  border-radius: 8px;
}
.img-box {
  background: linear-gradient(270deg, #9258f7 0%, #3370ff 100%);
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  margin-right: 8px;
}
.playback-tite {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
  justify-content: space-between;
}
.w-16 {
  width: 16px;
}
.h-16 {
  height: 16px;
}
.titles {
  font-size: 16px;
  color: #1f2329;
  font-weight: bold;
}
.flex {
  display: flex;
  align-items: center;
}
.p-8 {
  padding: 4px 8px;
  cursor: pointer;
  font-size: 14px;
  text-align: center;
}
</style>
